﻿function initCanvas(dotnetHelper) {

    var canvas = document.getElementById('myCanvas');



    canvas.addEventListener('mousedown', function (e) {

        dotnetHelper.invokeMethodAsync('MouseDown', e.offsetX, e.offsetY);

    });



    canvas.addEventListener('mousemove', function (e) {

        dotnetHelper.invokeMethodAsync('MouseMove', e.offsetX, e.offsetY);

    });



    canvas.addEventListener('mouseup', function (e) {

        dotnetHelper.invokeMethodAsync('MouseUp', e.offsetX, e.offsetY);

    });

}



function clearCanvas() {

    var canvas = document.getElementById('myCanvas');

    var ctx = canvas.getContext('2d');

    ctx.clearRect(0, 0, canvas.width, canvas.height);

}





function drawLine(x1, y1, x2, y2) {

    var canvas = document.getElementById('myCanvas');

    var ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'green';

    ctx.beginPath();

    ctx.moveTo(x1, y1);

    ctx.lineTo(x2, y2);

    ctx.stroke();

}

function drawRect(startX, startY, endX, endY) {

    var canvas = document.getElementById('myCanvas');

    var ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'green';
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.rect(Math.min(startX, endX), Math.min(startY, endY), Math.abs(endX - startX), Math.abs(endY - startY));
    ctx.stroke();
}



function getCanvas() {

    return document.getElementById('myCanvas').getContext('2d');

}